<template>
  <div>
    <el-cascader-panel
      v-model="selectValue"
      :options="options"
      @change="selChange"
    ></el-cascader-panel>
  </div>
</template>

<script>
import { api } from "@/utils/api";

export default {
  data() {
    return {
      selectValue: [],
      options: [],
    };
  },
  mounted() {
    let arr = localStorage.getItem("workBench");
    if (arr) {
      this.selectValue = JSON.parse(arr);
      // this.selectValue = [];
    }
    this.getStationsPoints();
  },
  activated() {
    // this.getStationsPoints();
  },
  methods: {
    selChange(data) {
      let filterList = this.options.filter((f) => f.value === data[0]);
      let arr = [];
      filterList.forEach((m) => {
        arr.push(m.label);
        if (m.children && m.children.length > 0) {
          m.children.forEach((n) => {
            if (n.value === data[1]) arr.push(n.label);
          });
        }
      });
      let res = arr.join(" | ");
      localStorage.setItem("workBench", JSON.stringify(data));
      localStorage.setItem("workBenchName", res);
      this.$emit("getWorKBenchValue", res);
      this.$emit("getWorKBenchCode", data);
      // console.log("a,v,b------>>>", data);
    },
    // 获取产线|工位
    async getStationsPoints() {
      let [ERR, GRES] = await api.getStationsPointsAPI();
      if (GRES.code === 0) {
        localStorage.setItem("ProductList", JSON.stringify(GRES.data));
        let list = GRES.data.map((m) => {
          if (m.PointCodes && m.PointCodes.length > 0) {
            let arr = m.PointCodes.map((M) => {
              return {
                label: M.PointName,
                value: M.PointCode,
              };
            });
            return {
              label: m.ProduceName,
              value: m.ProductLineCode,
              children: arr,
            };
          } else {
            return {
              label: m.ProduceName,
              value: m.ProductLineCode,
              children: [],
            };
          }
        });
        this.options = list;
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.el-cascader-panel /deep/ .el-cascader-menu__list li {
  height: 70px;
  // border: 1px solid red;
}
.el-cascader-panel /deep/ .el-cascader-menu__wrap {
  height: 50vh;
}
.el-cascader-panel /deep/ .el-cascader-menu {
  width: 50%;
}
</style>